<template>
  <div class="login-con">
    <Card icon="log-in" title="注册" :bordered="false">
      <div class="form-con">
        <Form :model="regForm" :label-width="80">
          <FormItem label="手机号">
            <Row>
              <Col span="16">
                <Input v-model="regForm.mobile" placeholder="请输入手机号"/>
              </Col>
              <Col span="5">
                <Button @click="getMobileCode" :class="{disabled: !this.canClick}" type="info">{{buttonContent}}</Button>
              </Col>
            </Row>
          </FormItem>
          <FormItem label="验证码">
            <Input v-model="regForm.code" placeholder="请输入手机验证码"/>
          </FormItem>
          <FormItem label="所属机构">
            <Select v-model="regForm.orgId" filterable clearable>
              <Option v-for="item in orgList" :value="item.id" :key="item.id">{{ item.name }}</Option>
            </Select>
          </FormItem>
          <FormItem label="密码">
            <Input v-model="regForm.password" type="password" placeholder="请输入密码"/>
          </FormItem>
          <FormItem label="确认密码">
            <Input v-model="regForm.password2" type="password" placeholder="请再次输入密码"/>
          </FormItem>
          <div style="text-align: center;">
            <Button type="primary" style="width: 80%;" @click="registerAction">立即注册</Button>
          </div>
        </Form>
      </div>
    </Card>
  </div>
</template>

<script>
export default {
  name: 'login',
  data () {
    return {
      orgList: [],
      buttonContent: '获取验证码',
      totalTime: 300,
      canClick: true,
      regForm: {
        mobile: '',
        orgId: '',
        code: '',
        password: '',
        password2: ''
      }
    }
  },
  methods: {
    getOrgList () {
      let url = '/api/api/student/org/list'
      this.$get(url).then((res) => {
        if (res.code === 0) {
          console.log(res)
          this.orgList = res.data
        }
      })
    },
    getMobileCode () {
      if (this.regForm.mobile === '' || this.regForm.mobile == null) {
        this.$Message.error({
          content: '手机号不能为空！'
        })
      } else {
        let url = '/api/api/student/register/phoneCode'
        let form = this.$qs.stringify({
          phone: this.regForm.mobile
        })
        this.$post(url, form).then((res) => {
          console.log(res)
          if (res.code === 0) {
            if (res.data === true) {
              this.$Message.success({
                content: '发送验证码成功！'
              })
              this.countDown()
            }
            if (res.data.code === 20004) {
              this.$Message.info({
                content: res.data.errorMessage
              })
            }
          }
        })
          .catch((error) => {
            if (error.status === 500) {
              this.$Message.error({
                content: error.message
              })
            }
          })
      }
    },
    countDown () {
      if (!this.canClick) return
      // 改动的是这两行代码
      this.canClick = false
      this.buttonContent = this.totalTime + 's后重新发送'
      let clock = window.setInterval(() => {
        this.totalTime--
        this.buttonContent = this.totalTime + 's后重新发送'
        if (this.totalTime < 0) {
          window.clearInterval(clock)
          this.buttonContent = '重新发送验证码'
          this.totalTime = 10
          this.canClick = true
          // 这里重新开启
        }
      }, 1000)
    },
    registerAction () {
      let url = '/api/api/student/register'
      if (this.regForm.mobile === '' || this.regForm.mobile == null) {
        this.$Message.error({
          content: '手机号不能为空！'
        })
      } else {
        if (this.regForm.password !== this.regForm.password2) {
          this.$Message.error({
            content: '两次输入的密码不一致！'
          })
        } else {
          let param = this.regForm
          this.$post(url, param).then((res) => {
            console.log(res)
            console.log(res)
            if (res.code === 0) {
            }
          })
            .catch((error) => {
              if (error.status === 500) {
                this.$Message.error({
                  content: error.message
                })
              }
            })
        }
      }
    },
    handleSubmit ({userName, password}) {
      let url = '/api/sys/staff/login'
      let form = this.$qs.stringify({
        mobile: userName,
        password: password
      })
      this.$post(url, form).then((res) => {
        if (res.code === 0) {
          localStorage.setItem('x-token', res.data.token)
          this.$router.push(res.data.routeUrl)
        } else {
          this.$Message.warning('用户名或密码错误')
        }
      })
    }
  },
  components: {
  },
  mounted () {
    this.getOrgList()
  }
}
</script>

<style scoped>
  .login-con{
    margin-top: 120px;
    width: 450px;
    margin-left: calc(50% - 225px);
    margin-right: calc(50% - 225px);
  }
  .disabled{
    background-color: #ddd;
    border-color: #ddd;
    color:#57a3f3;
    cursor: not-allowed;
  }
</style>
